<script setup>
import {ShoppingCart, User, Collection, Memo, Bicycle, Camera, Edit, Search} from "@element-plus/icons-vue";

import { useRouter } from 'vue-router';
const router = useRouter();
const goLogin = ()=>{
  router.push("/login").catch(err => err);
}
</script>


<template>

  <div>
    <el-row class="banner">

      <el-col :span="7">
        <img src="../assets/login.png" alt="蜗牛书城">
      </el-col>

      <el-col :span="7">
        <el-input size="small" placeholder="搜索关键字" clearable style="width: 250px;"></el-input>
        <el-button size="small" type="primary"><el-icon><Search /></el-icon>搜索</el-button>
      </el-col>
      <el-col :span="10" style="text-align: right">
        <el-button-group>
          <el-button plain size="small"><el-icon><User /></el-icon>欢迎您：</el-button>
          <el-button type="primary" size="small"><el-icon><ShoppingCart /></el-icon>购物车</el-button>
          <el-button type="primary" size="small"><el-icon><Collection /></el-icon>我的收藏</el-button>
          <el-button type="primary" size="small"><el-icon><Memo /></el-icon>我的订单</el-button>
          <el-button type="primary" size="small"><el-icon><Bicycle /></el-icon>退出</el-button>
          <el-button type="primary" size="small" @click="goLogin"><el-icon><Camera /></el-icon>登录</el-button>
          <el-button type="primary" size="small"><el-icon><Edit /></el-icon>注册</el-button>
        </el-button-group>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.banner {
  display: flex;
  justify-content: center;
  /* 底部对齐 */
  align-items: flex-end;
  padding: 5px;
  top: 0;
  left: 0;
  width: 100%;
  /* 左上角到右下角 */
  background: linear-gradient(to bottom right, #a9dff4, #688df4, #eef2ce);
}
</style>